<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
    <script src="../js库/mock.js"></script>
    <script src="../js库/vue.js"></script>
  
</head>
<body>
    <div id="root">
        <!-- 无序列表 最重要列表
                 ul只能的子标签只能是li
                 li里面可以放任何元素
        -->
        <!-- <ul>
            <li>手机</li>
            <li><a  href="https://www.apple.com.cn/ipad/">平板</a></li>
            <li>笔记本</li>
        </ul> -->

        <!-- 有序列表 ol包含li  自动给每一项加上编号
         -->
         <!-- <ol>
            <li v-for="(li,index) in list" :key="li.id">{{li.name}}</li>
         </ol> -->
         <!-- 
            自定义列表
                    用于对术语或名词进行解释  dl里面只能包含dt和dd  dt和dd的个数不受限制经常是一个dt对应多个dd
                                        帮助中心
                                            账号管理
                                            购物指南
                                            订单管理
         -->
        <dl>
            <dt>帮助中心</dt>
                    <dd>账号</dd>
                    <dd>购物</dd>
                    <dd>订单</dd>
        </dl>
    </div>
</body>

<script type="text/javascript">
    // alert(Mock.mock('@word(10)'));
    new Vue({
        el:"#root",
        data: { 
            id:Mock.mock({'num|1-10':1}).num,      
            title:Mock.mock('@cname'),
            qu:Mock.mock({'bool|1-2':true}).bool,
            search:Mock.mock({'search|100-200':101}).search,
            last:Mock.mock({'la|200-300':201}).la,
            list:[
                {id:Mock.mock('@id()'),name:Mock.mock('@cname')},
                {id:Mock.mock('@id()'),name:Mock.mock('@cname')},
                {id:Mock.mock('@id()'),name:Mock.mock('@cname')},
                {id:Mock.mock('@id()'),name:Mock.mock('@cname')},
            ]
                }
    })
</script>
</html>